<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div fxFlex="100" fxLayout="column">
    <table
        fxFlex="100"
        mat-table
        [dataSource]="dataSource"
        multiTemplateDataRows
    >
        <ng-container matColumnDef="group">
            <th
                fxFlex="45"
                fxLayoutAlign="start center"
                mat-header-cell
                *matHeaderCellDef
            >
                Service Group
            </th>
            <td
                fxFlex="45"
                fxLayoutAlign="start center"
                mat-cell
                *matCellDef="let element"
            >
                {{ element.serviceGroup }}
            </td>
        </ng-container>

        <ng-container matColumnDef="name">
            <th
                fxFlex="45"
                fxLayoutAlign="start center"
                mat-header-cell
                *matHeaderCellDef
            >
                Service Name
            </th>
            <td
                fxFlex="45"
                fxLayoutAlign="start center"
                mat-cell
                *matCellDef="let element"
            >
                {{ element.serviceName }}
            </td>
        </ng-container>

        <ng-container matColumnDef="action">
            <th
                fxFlex="10"
                fxLayoutAlign="start center"
                mat-header-cell
                *matHeaderCellDef
            >
                <button
                    mat-icon-button
                    color="accent"
                    (click)="getConfigurationServices()"
                    matTooltip="Refresh"
                >
                    <mat-icon>refresh</mat-icon>
                </button>
            </th>
            <td
                fxFlex="10"
                fxLayoutAlign="start center"
                mat-cell
                *matCellDef="let element"
            >
                <button
                    mat-icon-button
                    color="accent"
                    (click)="expand(element)"
                >
                    <mat-icon>edit</mat-icon>
                </button>
            </td>
        </ng-container>

        <ng-container matColumnDef="expandedDetail">
            <td
                mat-cell
                *matCellDef="let element"
                [attr.colspan]="displayedColumns.length"
            >
                <div
                    class="service-configuration-detail"
                    [@detailExpand]="
                        element === expandedElement ? 'expanded' : 'collapsed'
                    "
                >
                    <div fxFlex="100">
                        <sp-service-configs
                            [serviceConfiguration]="element"
                            (updateServiceConfiguration)="
                                updateConfigurationService($event)
                            "
                        ></sp-service-configs>
                    </div>
                </div>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr
            mat-row
            *matRowDef="let element; columns: displayedColumns"
            class="service-configuration-row"
            [class.service-configuration-row-expanded]="
                expandedElement === element
            "
        ></tr>
        <tr
            mat-row
            *matRowDef="let row; columns: ['expandedDetail']"
            class="service-configuration-detail-row"
        ></tr>
    </table>
</div>
